<template>
  <div>
    <Drawer title="页面全局JS脚本编辑"
            ref="PageGlobalJsDrawer"
            :width="450"
            placement="left"
            :closable="false"
            :mask-closable="true"
            :draggable="false"
            transfer
            v-model="visible"
            @on-close="cancel">

      <Alert show-icon style="padding-right: 10px; text-align: justify;">
        友情提示：此处编辑的JS脚本即使在设计器中编辑目标页面时也会执行，因此不建议在页面全局脚本中执行一些影响设计器使用体验的JS代码，例如alert或一些会造成页面阻塞的同步请求，
        但如果必须要执行某些会造成页面阻塞的代码，例如需要在访问页面前处理一些业务逻辑，那么可以使用【PnUtil.isDesignerPage()】获取当前页面地址是否是设计器页面，判断非设计器页面情况下再执行相应代码
      </Alert>
      <CodeEditor v-model="pageGlobalJsCode" :mode="'js'" :height="editorHeight" @on-submit-change="codeEditorSubmitChangeHandle"></CodeEditor>

    </Drawer>

  </div>
</template>

<script>

import { createHelpers } from 'vuex-map-fields';

const { mapFields } = createHelpers({
  getterType: 'designer/getField',
  mutationType: 'designer/updateField',
});

export default {
  name: "PageGlobalJsDrawer",
  props: {
    show: {
      type: Boolean
    }
  },
  data() {
    return {
      visible: this.show,
      pageGlobalJsCode: ''
    }
  },
  mounted() {

  },
  methods: {

    init() {
      if (this.pageMetadata.layout.layoutConfigData.pageGlobalJsCode == undefined) {
        this.pageGlobalJsCode = ''
      }else {
        this.pageGlobalJsCode = this.pageMetadata.layout.layoutConfigData.pageGlobalJsCode
      }
    },

    codeEditorSubmitChangeHandle (code) {
      let layoutConfigData = this.pageMetadata.layout.layoutConfigData
      layoutConfigData.pageGlobalJsCode = code
      this.$store.commit('designer/setLayoutConfigData', layoutConfigData)
    },

    cancel() {
      this.visible = false;
      this.$emit('cancel', this.visible)
      // 可以在这里编写关闭之后的逻辑处理
    }
  },
  computed: {
    ...mapFields({
      pageMetadata: 'pageMetadata'
    }),
    editorHeight () {
      return window.innerHeight - 235
    }
  },
  watch: {
    show(val) {
      this.visible = val
      if (val) {
        this.init()
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
